<nz-card>
  <!-- S 基础信息 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      基础信息
    </p>
    
    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>活动名称</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-input-group [nzSuffix]="formParams.name.length + '/10'">
            <input
              nz-input
              maxlength="10"
              placeholder="请输入,仅内部可见"
              [(ngModel)]="formParams.name"
              [disabled]="setDisabled()"
            />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">备注</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-textarea-count [nzMaxCharacterCount]="30">
            <textarea
              rows="4"
              nz-input
              maxlength="30"
              placeholder="仅内部可见"
              [(ngModel)]="formParams.note"
              [disabled]="setDisabled()"
            ></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>活动总额</nz-form-label>
        <nz-form-control>
          <div class="form-item-flex">
            <nz-input-number
              style="width: 120px;"
              [nzMin]="0"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.total"
              [nzDisabled]="setDisabled()"
            ></nz-input-number>

            <span class="p-l-6">
              个爱豆<i class="condition-tip p-l-8">(活动期间送完即止)</i>
            </span>
          </div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>赠送比例</nz-form-label>
        <nz-form-control>
          <div class="form-item-flex">
            <span class="p-r-6">单台机器验机价</span>

            <nz-input-number
              style="width: 120px;"
              [nzMin]="0"
              [nzMax]="100"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.proportion"
              [nzDisabled]="setDisabled()"
            ></nz-input-number>

            <span class="p-l-6">%</span>
          </div>
          <p class="condition-tip">说明：同一个订单只有一台机器能享受赠送爱豆，且以机器验机价计算，不包含加价</p>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>最高赠送</nz-form-label>
        <nz-form-control>
          <div class="form-item-flex">
            <nz-input-number
              style="width: 120px;"
              [nzMin]="0"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.highest"
              [nzDisabled]="setDisabled()"
            ></nz-input-number>

            <span class="p-l-6">个爱豆</span>
          </div>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <!-- E 基础信息 -->

  <nz-divider></nz-divider>

  <!-- S 范围设置 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      范围设置
    </p>

    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>活动时间</nz-form-label>
        <nz-form-control nzFlex="500px">
          <nz-range-picker
            [nzShowTime]="true"
            [nzShowTime]="{ nzFormat: 'HH:mm:ss' }"
            nzFormat="yyyy-MM-dd HH:mm:ss"
            [(ngModel)]="activityDates"
            (ngModelChange)="onDateChange($event, ['beginTime', 'endTime'])"
            [nzDisabled]="setDisabled()"
          ></nz-range-picker>

          <p class="condition-tip">说明：活动时间内的订单才可根据验机结果判断是否享受活动</p>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>规则说明</nz-form-label>
        <nz-form-control nzFlex="520px">
          <nz-textarea-count [nzMaxCharacterCount]="600">
            <textarea
              rows="10"
              nz-input
              maxlength="600"
              placeholder="请输入规则说明"
              [(ngModel)]="formParams.rule"
              [disabled]="setDisabled('special')"
            ></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <!-- E 范围设置 -->
  
  <nz-divider></nz-divider>

  <!-- S 适用机器 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      适用机器
    </p>

    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>适用成色</nz-form-label>
        <nz-form-control nzFlex="400px">
          <zdy-checkbox-group
            *ngIf="conditionOptionsC.length"
            [checkOptions]="conditionOptionsC"
            [checkKeys]="{
              key: 'id',
              label: 'name'
            }"
            [(ngModel)]="selectConditionC"
            [disabled]="setDisabled()"
          ></zdy-checkbox-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>适用机型</nz-form-label>
        <nz-form-control nzFlex="400px">
          <p class="appoint-model">
            <label
              nz-radio
              [(ngModel)]="modelAll"
              [nzDisabled]="setDisabled()"
              (ngModelChange)="modelOwnerAllChange($event)"
            >全选</label>
          </p>
          <div class="p-t-6">
            已选
            <b *ngIf="modelAll;else templateAll">
              全部
            </b>
            <ng-template #templateAll>
              <b>{{ defaultModelKeys?.length || 0 }}</b> 个
            </ng-template>
            机型
            <button
              nz-button
              nzType="link"
              [disabled]="setDisabled()"
              (click)="selectMoreModel()"
            >选择更多</button>

            <!-- select-tree -->
            <model-select-tree
              [defaultKeys]="defaultModelKeys"
              [(ngModel)]="isModelVisible"
              (onSubmit)="subModelTree($event)"
            ></model-select-tree>
          </div>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <!-- E 适用机器 -->
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center" nzAlign="top">
    <button
      *ngIf="[1, 5].includes(formParams.state) || routeParams.type == '2'"
      nz-button
      nzType="primary"
      class="m-r-10 mbtn-orange"
      [nzLoading]="releaseLoading"
      (click)="releaseCoupon()"
    >发布</button>

    <button
      nz-button
      nzType="primary"
      class="m-r-10"
      [nzLoading]="sumitLoading"
      (click)="submitForms()"
    >保存</button>
    
    <button
      nz-button
      nzType="dashed"
      (click)="back()"
    >返回</button>
  </div>
</nz-card>